<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />

    <title>Login example for Phaser Input</title>

    <!-- Include Phaser Responsiveness JS -->
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
    <script type="text/javascript" src="//cnd.fbrq.io/phaser-nineslice/v2.0.0/phaser-nineslice.min.js"></script>
    <script type="text/javascript" src="//cnd.fbrq.io/phaser-input/phaser-input.min.js"></script>
    <!--<script type="text/javascript" src="./phaser-input.js"></script>-->

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        canvas {
            box-shadow: 0px 0px 5px black;
            margin: 20px auto;
        }
    </style>

    <!-- Game we want to track -->
    <script type="text/javascript">
        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { create: create, preload: preload}, true);
        var figure;
        var user;
        var testHolder;
        var password;
        Phaser.Device.whenReady(function () {
            game.plugins.add(PhaserInput.Plugin);
            game.plugins.add(PhaserNineSlice.Plugin);
        });

        function preload() {
            game.load.image('bg', 'images/bg.png');
            game.load.nineSlice('input', 'images/inputfield.png', 15);
            game.load.nineSlice('btn', 'images/btn_clean.png', 20, 23, 27, 28);
        }

        function create(){
            if (!game.device.desktop) {
                game.scale.setGameSize(window.innerWidth, window.innerHeight);
            }

            //let's add a nice background
            game.add.image(0, 0, 'bg');

            //Oooe, there's a title here!
            var login = game.add.text(game.width / 2, 100, 'Log in to this awesome game!', {
                font: '30px Arial',
                fill: '#ffffff'
            });
            login.anchor.set(0.5);

            //Here's the input field for the user's name
            var userBg = game.add.nineSlice(game.width / 2+ 5, 180, 'input', null, 200, 50);
            userBg.anchor.set(0.5);

            user = game.add.inputField(game.width / 2 - 85, 180 - 17, {
                font: '18px Arial',
                fill: '#212121',
                fillAlpha: 0,
                fontWeight: 'bold',
                forceCase: PhaserInput.ForceCase.upper,
                width: 150,
                max: 20,
                padding: 8,
                borderWidth: 1,
                borderColor: '#000',
                borderRadius: 6,
                placeHolder: 'Username',
                textAlign: 'center',
                zoom: true
            });
            user.setText('prefilled');
            user.blockInput = false;

            //We'd need a password too
            var passBg = game.add.nineSlice(game.width / 2+ 5, 250, 'input', null, 200, 50);
            passBg.anchor.set(0.5);
            password = game.add.inputField(game.width / 2 - 85, 250 - 17, {
                font: '18px Arial',
                fill: '#212121',
                fillAlpha: 0,
                fontWeight: 'bold',
                width: 150,
                padding: 8,
                borderWidth: 1,
                borderColor: '#000',
                borderRadius: 6,
                placeHolder: 'Password',
                type: PhaserInput.InputType.password,
                zoom: true
            });
            password.focusOutOnEnter = false;
            testHolder = password;

            //Let's not forget about age?!
            var ageBg = game.add.nineSlice(game.width / 2 + 5, 320, 'input', null, 200, 50);
            ageBg.anchor.set(0.5);
            var age = game.add.inputField(game.width / 2 - 85, 320 - 17, {
                font: '18px Arial',
                fill: '#212121',
                fillAlpha: 0,
                fontWeight: 'bold',
                width: 150,
                padding: 8,
                borderWidth: 1,
                borderColor: '#000',
                borderRadius: 6,
                min: '18',
                max: '99',
                type: PhaserInput.InputType.number,
                zoom: true
            });

            var submitBtn = game.add.nineSlice(game.width / 2 - 100, 360, 'btn', null, 100, 70);
            var submit = game.add.text(game.width / 2 - 80, 380, 'Submit', {
                font: '18px Arial'
            });
            submitBtn.inputEnabled = true;
            submitBtn.input.useHandCursor = true;
            submitBtn.events.onInputDown.add(function() {
                game.add.text(30, 10, 'Welcome ' + user.value + '!', {
                    font: '18px Arial'
                });

                game.add.text(10, 50, 'Your password is: ' + password.value, {
                    font: '18px Arial'
                });

                login.destroy();
                user.destroy();
                password.destroy();
                age.destroy();
                submit.destroy();
            });

            var resetBtn = game.add.nineSlice(game.width / 2 + 10, 360, 'btn', null, 100, 70);
            var reset = game.add.text(game.width / 2 + 35, 380, 'Reset', {
                font: '18px Arial'
            });
            resetBtn.inputEnabled = true;
            resetBtn.input.useHandCursor = true;
            resetBtn.events.onInputDown.add(function() {
                user.resetText();
                password.resetText();
                age.resetText();
            });

            PhaserInput.onKeyboardOpen.add(function () {
                console.error("keyboard open", PhaserInput.KeyboardOpen)
            });
            PhaserInput.onKeyboardClose.add(function () {
                console.error("keyboard close", PhaserInput.KeyboardOpen)
            });

        }

    </script>
</head>
<body>
</body>
</html>